<template>
  <div class="customSearch">
    <div class="d-flex align-items-center w-100 mb-1">
      <div class="search-left">
        <div v-if="!isLeftSelect" class="title">
          {{ title }}
          <b v-if="total !== 0 && total !== '0'">(共{{ total }}条)</b>
        </div>
        <div v-if="isLeftSelect" class="left-select" @click="selectShow = true">
          {{ selectText }}
          <i class="iconfont">&#xe656;</i>
          <b v-if="total !== 0 && total !== '0'">(共{{ total }}条)</b>
        </div>
      </div>
      <!-- <i v-if="!isSearch" class="iconfont ml-auto" @click="isSearch = true">&#xe60f;</i> -->
      <i v-if="isSuperSearch" class="iconfont ml-auto" @click="superSearch">&#xe6aa;</i>
      <van-popup v-model="selectShow" position="bottom">
        <van-picker :title="pickerTitle" show-toolbar :default-index="selectIndex" :columns="selectColumns" @cancel="selectShow = false" @confirm="onConfirm" />
      </van-popup>
    </div>
    <!-- <el-input v-model="value" :placeholder="placeholder" @input="search" /> -->
    <div class="inp-text">
      <p @click="companySearch">{{ companyName }}</p>
      <i v-if="isSearch" class="iconfont" @click="hideSearch">&#xe647;</i>
    </div>
    <!-- 企业下拉框 -->
    <van-popup v-model="companySelectShow" position="bottom">
      <div class="py-2 px-2">
        <el-input v-model="companySearchValue" placeholder="请输入企业名称" @change="allCompanyDrop()" />
      </div>
      <van-picker title="请选择企业" show-toolbar :default-index="companySelectIndex" :columns="companySelectColumns" @cancel="companySelectShow = false" @confirm="onCompanyConfirm" />
    </van-popup>
  </div>
</template>

<script>
import { getRefCompany } from '@/api/common'
export default {
  props: {
    title: {
      type: String,
      default: '监测列表'
    },
    placeholder: {
      type: String,
      default: '请输入企业名称'
    },
    pickerTitle: {
      type: String,
      default: '标题'
    },
    total: {
      type: [Number, String],
      default: 0
    },
    isLeftSelect: {
      type: Boolean,
      default: false
    },
    selectValue: {
      type: [Number, String],
      default: ''
    },
    selectColumns: {
      type: Array,
      default: () => [
        {
          text: '安全报警',
          value: '安全报警'
        },
        {
          text: '环保报警',
          value: '环保报警'
        },
        {
          text: '消防报警',
          value: '消防报警'
        },
        {
          text: '能源报警',
          value: '能源报警'
        }
      ]
    },
    isSuperSearch: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      value: '',
      isSearch: false,
      selectText: '安全报警',
      selectShow: false,
      selectIndex: 0,
      companyName: '请选择企业',
      companySelectIndex: 0,
      companySelectShow: false,
      companySelectColumns: [],
      companySearchValue: ''
    }
  },
  watch: {
    selectValue(nv) {
      this.initPicker()
    }
  },
  mounted() {
    this.initPicker()
  },
  methods: {
    initPicker() {
      this.selectColumns.forEach((v, vi) => {
        if (typeof v === 'object') {
          if (v.value === this.selectValue) {
            this.selectIndex = vi
            this.selectText = v.text
          }
        } else {
          if (v === this.selectValue) {
            this.selectIndex = vi
            this.selectText = v
          }
        }
      })
    },
    hideSearch() {
      this.isSearch = false
      // this.value = ''
      this.value = ''
      this.companyName = '请选择企业'
      this.$emit('search', this.value)
    },
    search() {
      this.$emit('search', this.value)
    },
    restore() {
      this.value = ''
      this.isSearch = false
    },
    superSearch() {
      this.$emit('superSearch', '高级搜索')
    },
    onConfirm(value, index) {
      const backV = typeof value === 'object' ? value.value : value
      this.selectText = backV
      this.$emit('update:selectValue', backV)
      this.selectShow = false
    },
    onCompanyConfirm(value, index) {
      console.log(value)
      this.companyName = value.text
      this.value = value.text
      this.companySelectShow = false
      this.$emit('search', this.value)
    },
    companySearch() {
      this.isSearch = true
      this.companySelectShow = true
      this.companySearchValue = ''
      this.companySelectIndex = 0
      this.allCompanyDrop()
    },
    async allCompanyDrop() {
      const { status, data } = await getRefCompany({
        orgName: this.companySearchValue
      })
      if (status === 0 && data) {
        this.companySelectColumns = data.map(v => {
          return {
            text: v.organizationName,
            value: v.organizationId
          }
        })
      }
    }
  }
}
</script>

<style lang="scss">
.customSearch {
  margin-bottom: 20px;
  // display: flex;
  // align-items: center;
  // border-bottom: 1px solid #fff;
  .search-left {
    min-height: 30px;
    .title {
      font-size: 20px;
      font-weight: bold;
      color: #fff;
      height: 30px;
      line-height: 30px;
      overflow: hidden;
      b {
        font-size: 14px;
        letter-spacing: 2px;
        font-weight: normal;
      }
    }
    .left-select {
      color: #fff;
      font-weight: bold;
      font-size: 20px;
      height: 30px;
      display: flex;
      align-items: center;
      .iconfont {
        font-size: 16px;
        margin-left: 5px;
      }
      b {
        font-size: 14px;
        letter-spacing: 2px;
        font-weight: normal;
        margin-left: 10px;
        padding-top: 10px;
      }
    }
  }
  .el-input {
    // flex: 1;
    // .el-input__inner {
    //   background-color: rgba(0, 0, 0, 0);
    //   // border: none;
    //   color: #fff;
    //   // border-top: 1px solid #fff;
    //   border-radius: 5px;
    //   border-color: #fff!important;
    //   &::placeholder {
    //     color: #fff;
    //   }
    // }
    // .el-input__clear {
    //   color: #fff;
    // }
  }
  .iconfont {
    font-size: 45px;
    color: #fff;
    margin-left: 20px;
  }
  .inp-text{
    width: 100%;
    height: 70px;
    line-height: 70px;
    font-size: 30px;
    color: #fff;
    padding: 0 10px;
    border: 1px solid #fff;
    border-radius: 10px;
    display: flex;
    justify-content: space-between;
    p {
      width: calc(100% - 80px);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}
</style>
